<!-- 1.需求1子组件能绑定到父组件的数据 -->
<!-- 2.需求2自己按键的input能改变父组件的数据 -->
<!-- 3.需求3 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn 
			:number1="num1" 
			:number2="num2" 
			@num1change="changenum1" 
			@num2change="changenum2"></cpn>
			<!-- <cpn :number1="dnumber1" :number2="dnumber2"></cpn> -->
		</div>
		
	</body>
	<template id="cpn">
		<div>
			<!-- 1.父子组件数据双向绑定,会报错不推荐 -->
			<!-- <h2>{{number1}}</h2>
			<input type="text" v-model="number1">
			<h2>{{number2}}</h2>
			<input type="text" v-model="number2"> -->
			<!-- 2.使用子组件data来让数据改变 -->
			<h2>props:{{number1}}</h2>
			<h2>data:{{dnumber1}}</h2>
			<!-- 用v-model只能单向改变,所以需要用另一种写法 -->
			<!-- <input type="text" v-model="dnumber1"> -->
			<input type="text" :value="dnumber1" @input="num1Input">
			
			
			<h2>props:{{number2}}</h2>
			<h2>data:{{dnumber2}}</h2>
			<!-- 用v-model只能单向改变,所以需要用另一种写法 -->
			<!-- <input type="text" v-model="dnumber2"> -->
			<input type="text" :value="dnumber2" @input="num2Input">
		</div>
	</template>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const cpn = {
			template : '#cpn',
			props: {
				number1: Number,
				number2: Number
			},
			data(){
				return {
					dnumber1: this.number1,
					dnumber2: this.number2
				}
			},
			methods:{
				num1Input(event){
					
					// 1.将input中的value赋值到dumber中
					this.dnumber1 = event.target.value;
					
					// 2.为了让父组件可以修改值,发出一个事件
					this.$emit('num1change',this.dnumber1);
					
					// 3.同时修改dnumber2的值
					this.dnumber2 = this.dnumber1*100;
					this.$emit('num2change',this.dnumber2);
				},
				num2Input(event){
					// 1.将input中的value赋值到dumber中
					this.dnumber2 = event.target.value;
					// 2.为了让父组件可以修改值,发出一个事件
					this.$emit('num2change',this.dnumber2);
					// 3.同时修饰dnumber1的值
					this.dnumber1 = this.dnumber2/100;
					this.$emit('num1change',this.dnumber1);
				}
			}
		}
		
		
		const app = new Vue({
			el : "#app",
			data:{
				num1:1,
				num2:2
			},
			components:{
				cpn
			},
			methods:{
				changenum1(item){
					// 传递过来的是字符串所以需要转换
					console.log(typeof item);
					this.num1 = parseFloat(item);
				},
				changenum2(item){
					// 传递过来的是字符串所以需要转换
					console.log(typeof item);
					this.num2 = parseFloat(item);
				}
			}
		})
	</script>
</html>
